<template>
  <div class="fsbc" style="width:100%;height:100%;">
    <div class="left" style="width:27vw;height:100%;margin-right:16px;">
      <div class="list fsec">
        <div class="item" v-for="(item,index) in list1" :key="index">
          <div class="name">{{item.name}}</div>
          <div class="val" :class="item.class">{{moneyFormat(item.val)}}</div>
        </div>
      </div>
    </div>
    <div class="right" style="width:18vw;height:100%;">
      <div class="list fsec">
        <div class="item" v-for="(item,index) in list2" :key="index">
          <div class="name">{{item.name}}</div>
          <div class="val" :class="item.class">{{moneyFormat(item.val)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RepairViewList from "./RepairViewList.vue"; 

export default {
  name: "box2",
  props:{
    datas:Array,
    moneyFormat:Function
  },
  components: {
    RepairViewList,
  },
  data() {
    return {
      list1: [
        {name:'全院设备总资产',val:'36885246'},
        {name:'盘亏资产',val:'885246',class:'m_red'},
      ],
      list2: [
        {name:'设备总量',val:51},
        {name:'未盘点',val:45,class:'m_red'},
        {name:'已盘点',val:6},
      ],
      model: null,
      dialog_visible: false,
      sub_title: null,
      filters: [],
    };
  },
  watch: {
    datas(){
      this.datas[0].forEach((i,index)=>this.list1[index].val=i.toFixed(0))
      this.datas[1].forEach((i,index)=>this.list2[index].val=i.toFixed(0))
    }
  },
};
</script>

<style lang="stylus">
.num {
  cursor: pointer;
}
.left{
  background-image: url(./image/box2-1.png);
  background-size: 100% 100%;
}
.right{
  background-image: url(./image/box2-2.png);
  background-size: 100% 100%;
}
</style>